<template>
  <div class="header">
    <div class="container">

      <img
        class="image"
        src="https://h5static.kuwo.cn/www/kw-www/img/logo.7bf8751.png"
        alt=""
        @click="back"
      >
      <div class="nav">
        <span :class="{active: currentIndex === 1}">发现音乐</span>
        <span>下载客户端</span>
        <span>音乐现场</span>
        <span>VIP会员</span>
        <span>酷我畅听</span>
        <span>酷我耳机</span>
      </div>
      <form>
        <span id="sousuo" class="iconfont icon-sousuo" />
        <input
          type="text"
          placeholder="搜索音乐/MV/歌单/歌手"
          class="ipt"
          @focus="handleshow"
          @blur="handlenone"
        >
        <div v-show="showlist" class="selector-list">
          <h1>大家都在搜</h1>
          <ul>
            <li>
              <span class="one">1</span>
              <span>孤勇者</span>
            </li>
            <li>
              <span class="two">2</span>
              <span>太想念</span>
            </li>
            <li>
              <span class="three">3</span>
              <span>王心凌</span>
            </li>
            <li>
              <span class="gray">4</span>
              <span>晚风做酒</span>
            </li>
            <li>
              <span class="gray">5</span>
              <span>旧梦</span>
            </li>
            <li>
              <span class="gray">6</span>
              <span>三生三幸</span>
            </li>
            <li>
              <span class="gray">7</span>
              <span>月老掉线</span>
            </li>
            <li>
              <span class="gray">8</span>
              <span>镜中渊</span>
            </li>
            <li>
              <span class="gray">9</span>
              <span>本草纲目</span>
            </li>
            <li>
              <span class="gray">10</span>
              <span>三两三</span>
            </li>
          </ul>
        </div>
      </form>
      <span class="login">
        <a href="">登录 /</a>
        <a href=""> 注册</a>
      </span>
    </div>

    <div class="nav-list">
      <div class="nav-item">
        <span @click="handleclick(0)"
              :class="{recommend:index==0}">推荐</span>
        <span @click="handleclick(1)"
              :class="{recommend:index==1}">排行榜</span>
        <span @click="handleclick(2)"
              :class="{recommend:index==2}">歌手</span>
        <span @click="handleclick(3)"
              :class="{recommend:index==3}">歌单</span>
        <span @click="handleclick(4)"
              :class="{recommend:index==4}">MV</span>
      </div>
    </div>

  </div>

</template>

<script>
export default {
  name: 'Header',
  // props: ['flag'],
  data() {
    return {
      index: 0,
      currentIndex: 1,
      showlist: false
    }
  },
  methods: {
    handleclick (val) {
      this.index = val
      if (val === 0) {
        this.$router.push('/recommend')
      }
      if (val === 1) {
        this.$router.push('/top')
        this.$router.push('/rank')
      }
      if (val === 2) {
        this.$router.push('/singer')
      }
      if (val === 3) {
        this.$router.push('/songlist')
      }
      if (val === 4) {
        this.$router.push('/video')
      }
    },
    back() {
      this.$router.push('/')
    },
    handleshow() {
      // console.log(e)
      this.showlist = true
    },
    handlenone() {
      this.showlist = false
    }

  }
}
</script>

<style lang="less" scoped>
.header {
  .container {
    width: 1300px;
    margin: 0 auto;
    display: flex;
    height: 70px;
    justify-content: space-between;
    align-items: center;
    .image {
      height: 39px;
      cursor: pointer;
    }
    .nav {
      height: 100%;
      font-size: 18px;
      display: flex;
      cursor: pointer;

      span {
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        margin-right: 30px;
        padding: 0 10px;
      }
      .active {
        background-color: #ffe443;
        font-weight: 700;
      }
    }
    form {
      position: relative;
      border: 1px solid #ddd;
      padding: 5px;
      width: 280px;
      margin-left: -50px;
      // height: 20px;
        background-color: #f5f5f5;

      input {
        width: 70%;
        outline: none;
        border: none;
        text-indent: 1em;
        background-color: #f5f5f5;

      }

    }
          .selector-list{
        position: absolute;
        height: 400px;
        z-index: 999;
        margin-top: 30px;
        // border: 1px solid #ccc;
        width: 100%;
        background-color: #FFFFFF;
        opacity: 0.9;
        h1{
          margin-left: 20px;
        }
        li{
          margin-top: 14px;

          span{
          font-size: 16px;
          color: black;
          margin-left: 20px;
          // width: 20px;
          // height: 20px;
          // border: 1px solid red;
          padding: 5px;
        border-radius: 10px;

        }
        .one{
          // border-radius: 50%;

          background-color: red;
        }
        .two{
          background-color: orange;
        }
        .three{
          background: green;
        }
        .gray{
          background-color: #b3b3b3;
        }
        }
      }
    .login {
      font-size: 16px;
    }
  }
  .nav-list {
    display: flex;
    width: 1300px;
    margin: 0 auto;
    margin: 20px 0 30px 0;
    align-items: center;
    .nav-item {
      height: 100%;
      margin-left: 250px;
      font-size: 16px;
      span {
        cursor: pointer;
        color: #555;
        margin-right: 50px;
      }
      .recommend {
        font-weight: 800;
        border-bottom: 3px solid #ffe443;
      }
    }
  }

}
</style>